<template>
  <div class="my-reservation">
    <yd-tab v-model="tab2" :prevent-default="false" :item-click="itemClick">
      <yd-tab-panel v-for="(item,index) in items" :key="index" :label="item.label">
        <scroll :data="appointmentData" v-show="item.id === 1" @loadMore="loadMoreAppointment">
          <div class="item" v-for="(item,index) of appointmentData" :key="index">
            <router-link to="/appointment-station?type=appointment">
              <div class="item-top">
                <img class="icon" src="../../assets/icon/station-i.png">
                <div class="item-body">
                  <h2>5F-012</h2>
                  <p>10/28 周五 上午 —— 全天</p>
                </div>
                <img class="arrow" src="../../assets/icon/arrow.png">
              </div>
            </router-link>
            <div class="btn-box">
              <yd-button type="primary" class="confirm">扫码签到</yd-button>
              <yd-button type="danger" class="cancel" @click.native="cancel(item)">取消预约</yd-button>
            </div>
          </div>
        </scroll>

        <scroll :data="useData" v-show="item.id === 2" @loadMore="loadMoreUse">
          <div class="item" v-for="(item,index) of useData" :key="index">
            <router-link to="/appointment-station?type=use">
              <div class="item-top">
                <img class="icon" src="../../assets/icon/station-i.png">
                <div class="item-body">
                  <h2>5F-012</h2>
                  <p>10/28 周五 上午 —— 全天</p>
                </div>
                <img class="arrow" src="../../assets/icon/arrow.png">
              </div>
            </router-link>
            <div class="btn-box">
              <yd-button type="primary" class="confirm">再次预约</yd-button>
              <yd-button type="danger" class="cancel" @click.native="cancelStation">注销工位</yd-button>
            </div>
          </div>
        </scroll>

        <scroll :data="historyData" v-show="item.id === 3" @loadMore="loadMoreHistory">
          <div class="item" v-for="(item,index) of historyData" :key="index">
            <router-link to="/appointment-station?type=history">
              <div class="item-top">
                <img class="icon" src="../../assets/icon/station-i.png">
                <div class="item-body">
                  <h2>5F-012</h2>
                  <p>10/28 周五 上午 —— 全天</p>
                </div>
                <img class="arrow" src="../../assets/icon/arrow.png">
              </div>
            </router-link>
            <div class="btn-box">
              <yd-button type="primary" class="confirm">再次预约</yd-button>
            </div>
          </div>
        </scroll>
      </yd-tab-panel>
    </yd-tab>

    <yd-popup v-model="show" position="bottom">
      <div class="pup">
        <h2 class="pup-title">选择你要注销签退的工位(可多选)</h2>
        <div class="station-box">
          <span
            :class="{active:currentSelect === item}"
            v-for="(item,index) in selectStations"
            @click="currentSelect = item"
            :key="index"
          >{{item}}</span>
        </div>
        <yd-button
          size="large"
          type="primary"
          :disabled="false"
          class="btn-blue"
          @click.native="show = false"
        >确认注销</yd-button>
      </div>
    </yd-popup>
  </div>
</template>
<script>
import Scroll from '../../base/Scroll'
let count = 0
export default {
  name: 'MyReservation',
  components: {
    Scroll
  },
  data() {
    return {
      tab2: 0,
      items: [
        { label: '预约中', id: 1 },
        { label: '使用中', id: 2 },
        { label: '历史预约', id: 3 }
      ],
      show: false,
      appointmentPage: 1,
      appointmentPageSize: 10,
      appointmentData: [],
      usePage: 1,
      usePageSize: 10,
      useData: [],
      historyPage: 1,
      historyPageSize: 10,
      historyData: [],
      currentSelect: '3D-009',
      selectStations: ['3D-009', '3D-110']
    }
  },
  methods: {
    itemClick(key) {
      this.tab2 = key
      switch (key) {
        case 1:
          this.initUseList()
          break
        case 2:
          this.initHistory()
          break
        default:
          this.initAppointmentList()
      }
    },
    cancelStation() {
      this.show = true
    },
    initAppointmentList() {
      this.$dialog.loading.open('数据加载中')
      this.getAppointmentList().then(res => {
        this.appointmentData = [...this.appointmentData, ...res]
        this.$dialog.loading.close()
      })
    },
    initUseList() {
      this.$dialog.loading.open('数据加载中')
      this.getUseList().then(res => {
        this.useData = [...this.useData, ...res]
        this.$dialog.loading.close()
      })
    },
    initHistory() {
      this.$dialog.loading.open('数据加载中')
      this.getHistoryist().then(res => {
        this.historyData = [...this.historyData, ...res]
        this.$dialog.loading.close()
      })
    },
    getAppointmentList() {
      return new Promise(resolve => {
        // 模拟数据请求
        setTimeout(() => {
          const arr = []
          for (let i = 0; i < 8; i++) {
            arr.push(count++)
          }
          resolve(arr)
        }, 1000)
      })
    },
    loadMoreAppointment(callback) {
      this.getAppointmentList().then(res => {
        this.appointmentData = [...this.appointmentData, ...res]
        this.appointmentPage++
        callback()
      })
    },
    getUseList() {
      return new Promise(resolve => {
        // 模拟数据请求
        setTimeout(() => {
          const arr = []
          for (let i = 0; i < 8; i++) {
            arr.push(count++)
          }
          resolve(arr)
        }, 1000)
      })
    },
    loadMoreUse(callback) {
      this.getUseList().then(res => {
        this.useData = [...this.useData, ...res]
        this.usePage++
        callback()
      })
    },
    getHistoryist() {
      return new Promise(resolve => {
        // 模拟数据请求
        setTimeout(() => {
          const arr = []
          for (let i = 0; i < 8; i++) {
            arr.push(count++)
          }
          resolve(arr)
        }, 1000)
      })
    },
    loadMoreHistory(callback) {
      this.getHistoryist().then(res => {
        this.historyData = [...this.historyData, ...res]
        this.historyPage++
        callback()
      })
    },
    cancel(item) {
      this.$dialog.confirm({
        mes: '是否取消当前预约？',
        opts: () => {
          this.$dialog.toast({ mes: '你点了确定', timeout: 1000 })
        }
      })
    }
  },
  mounted() {
    this.initAppointmentList()
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.my-reservation
  height: 100%;
  width: 100%;
  >>>.yd-tab-nav-item
    line-height: 0.92rem !important;
    color: $darkText !important;
  >>>.yd-tab-active
    color: $blue !important;
    &:before
      left: 50%;
      margin-left: 0;
      transform: translateX(-50%);
      height: 0.06rem;
  >>>.yd-tab-box
    margin-bottom: 0.2rem;
  .item
    background: $white;
    margin-bottom: 0.1rem;
    padding: 0.28rem 0.26rem 0.42rem 0.22rem;
    overflow: hidden;
    .item-top
      position: relative;
    img
      display: block;
    .icon
      float: left;
      margin-right: 0.24rem;
      display: block;
      width: 1.12rem;
      height: 1.12rem;
      padding: 0.02rem;
    .arrow
      width: 0.46rem;
      height: 0.46rem;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    .item-body
      height: 1.12rem;
      padding-right: 0.5rem;
      margin-bottom: 0.44rem;
      h2
        line-height: 0.48rem;
        font-size: 0.32rem;
        color: $darkText;
        margin-bottom: 0.32rem;
      p
        line-height: 0.4rem;
        font-size: 0.28rem;
        color: $lightDarkText;
    .btn-box
      float: right;
      .yd-btn
        width: 1.92rem;
        height: 0.68rem;
        box-sizing: border-box;
        border-radius: 5px;
        &.cancel
          background: $white;
          color: $blue;
          border: 1px solid $blue;
        &.confirm
          background: $blue;
          margin-right: 0.2rem !important;
  >>>.yd-tab
    height: 100%;
    .yd-tab-panel
      height: calc(100% - 1.12rem);
      .yd-tab-panel-item
        height: 100%;
  .pup
    background: $white;
    padding: 0.28rem 0 0.2rem;
    .pup-title
      font-size: 0.26rem;
      color: $darkText;
      line-height: 0.36rem;
      padding-left: 0.39rem;
    .station-box
      padding: 0.24rem 0.32rem 0.4rem;
      span
        display: inline-block;
        text-align: center;
        width: 1.8rem;
        height: 0.66rem;
        line-height: 0.66rem;
        border: 1px solid #E7E7E7;
        color: #333333;
        margin-right: 0.2rem;
        box-sizing: border-box;
        border-radius: 5px;
        &.active
          color: #4F94E3;
          border-color: #4F94E3;
</style>
